<template>
	<tn-navbar fixed    :placeholder="false" :bottom-shadow="false" >支付账单</tn-navbar>
	<view class="tn-mt-xl " > 
    <!-- 账户总金额 -->
    <view class="sum  tn-gradient-bg__cool-9  tn-white_text tn-m-sm tn-shadow-md tn-flex tn-flex-column tn-align-center"  >
        <view class=" tn-text-lg tn-text-bold tn-text-center">账单统计</view>
        <view class=" tn-text-xxl tn-text-bold">
            <text>{{ dailyIncomeStatistics.amountActuallyPaid }}</text>
        </view>
        <view class=" tn-flex tn-justify-between tn-w-full  tn-mt" >
            <view class="tn-flex-1 tn-flex tn-flex-column tn-align-center">
                <view class=" tn-text-md" >交易笔数</view>
                <view class="tn-text-lg tn-text-bold">{{ dailyIncomeStatistics.payCounts }}</view>
            </view>
            <view class="tn-flex-1 tn-flex tn-flex-column tn-align-center">
                <view class=" tn-text-md">临停收入</view>
                <view class="tn-text-lg tn-text-bold">{{ dailyIncomeStatisticsParking.amountActuallyPaid }}</view>
            </view>
            <view class="tn-flex-1 tn-flex tn-flex-column tn-align-center">
                <view class="tn-text-md">套餐收入</view>
                <view class="tn-text-lg tn-text-bold">{{ dailyIncomeStatisticsPackage.amountActuallyPaid }}</view>
            </view>
            <view class="tn-flex-1 tn-flex tn-flex-column tn-align-center">
                <view class=" tn-text-md">储值卡收入</view>
                <view class=" tn-text-lg tn-text-bold">{{ dailyIncomeStatisticsStoreCard.amountActuallyPaid }}</view>
            </view>
        </view>
    </view>
    <!-- 账单记录 -->
    <view class="tn-shadow-md">
        <view class="tn-mt-sm tn-p-sm">
            <tn-title title="账单记录" mode="vLine" assist-color="tn-blue" size="lg" />
        </view>
        <block v-for="(item, index) in billList.data" :key="index">
            <view class=" tn-border-bottom tn-gray-disabled_border tn-flex justify-between tn-align-center  tn-p-sm">
                <view class=" tn-flex tn-align-center ">
                   
                    <view  >
                        <view class="  tn-text-md tn-text-bold">{{ item.goodsName }} <text v-show="item.status==1 && item.paymentAgencyShortName!='cash_pay_cny' && item.paymentAgencyShortName!='stored_card_pay_cny' && item.paymentAgencyShortName!='abnormal_payment' && item.paymentAgencyShortName!='system_fund_account' && item.paymentAgencyShortName!='coupon'" class="tn-ml tn-blue_text" @click="openPopupRefund(item)">退款</text>
						</view>
                        <view class=" tn-mt-xs tn-text-sm tn-gray_text">{{ item.newPayTime }}</view>
                    </view>
                </view>
                <view class=" tn-text-right">
                    <view class="status">{{ item.statusName }}&nbsp; {{ (item.status==4 || item.status==5 || item.status==10) ? '-' : '+' }} {{ item.amountActuallyPaid }}</view>
                    <view class="tn-mt-xs tn-text-sm tn-gray_text">机构: {{ item.paymentAgencyShortNameTitle }}</view>
                </view>
            </view>
        </block>
    </view>
    <view class="tn-tabbar-height"></view>
	
	
	<tn-popup v-model="isPopupRefund" width="90%"   open-direction="center" :overlay="false" :radius="25"  >
		<view class="tn-shadow  tn-p-sm  tn-border  tn-border-bottom  tn-border-top tn-gray-disabled_border">
		<view class="tn-mt-sm tn-p-sm tn-mb">
		    <tn-title title="退款金额" mode="vLine" assist-color="tn-blue" size="lg" />
			
		</view>
		
		 	<tn-input v-model="refundAmt" placeholder="最小金额0.01，最大金额实付金额"></tn-input>
    <view class="tn-mt-sm tn-p-sm tn-mb">
      <tn-title title="退款原因" mode="vLine" assist-color="tn-blue" size="lg" />

    </view>
		 	<tn-input v-model="refundReason" placeholder="建议输入，方便追账"></tn-input>
		<view class="tn-mt tn-flex justify-evenly  ">
			<tn-button @click="closePopupRefund" text-color="tn-white" bg-color="tn-grey">取消</tn-button>
			<tn-button @click="confirmRefund" text-color="tn-white">确认</tn-button>
		</view>
</view>

		</tn-popup>
	
	
	</view>
</template>

<script setup lang="ts">
import box from '@/components/global-box/index.vue';
import {ref, reactive, type Ref} from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import CfPayUtil from "@/cfsheep/api/pay/pay";
import {parseTime, timeFn} from "@/cfsheep/util";
import dayjs from "dayjs";
import type { TnModalInstance } from "@/uni_modules/tuniaoui-vue3";

const fixedList = ['账单明细', '资产统计'];
const billObj = {
    title: '浙AAC1151',
    money: '129.68',
    state: 1,
    time: '2023-09-22 20:06',
    balance: '12,812.08',
    icon: 'plant',
}
interface billListData {
  data : Array<CfOrder>
}
const billList = reactive<billListData>({
    data: []
})
const carParkId = ref(0);
const paymentAgencyList: Ref<CfPaymentAgency[]> = ref([]);
//总收入
const dailyIncomeStatistics: Ref<CfDailyIncomeStatistics> = ref({});
//临停
const dailyIncomeStatisticsParking: Ref<CfDailyIncomeStatistics> = ref({});
//套餐
const dailyIncomeStatisticsPackage: Ref<CfDailyIncomeStatistics> = ref({});
//储值卡
const dailyIncomeStatisticsStoreCard: Ref<CfDailyIncomeStatistics> = ref({});

const goodsTypeOptions = ref([
  {label: '停车', value: 1},
  {label: '充值', value: 2},
  {label: '洗车', value: 3},
  {label: '转账', value: 4},
  {label: '停车套餐', value: 5},
  {label: '车位预订', value: 6},
  {label: '优惠券活动充值', value: 7},
  {label: '汽车充电', value: 8},
  {label: '提现', value: 9},
  {label: '退款', value: 10},
  {label: '收款', value: 11},
  {label: '电动车充电', value: 12},
  {label: '用户角色', value: 13}
]);
const statusOptions = ref([
  {label: '待支付', value: 0},
  {label: '已支付', value: 1},
  {label: '已发货', value: 2},
  {label: '已取消', value: 3},
  {label: '退款中', value: 4},
  {label: '已退款', value: 5},
  {label: '退货中', value: 6},
  {label: '已退货', value: 7},
  {label: '交易成功', value: 8},
  {label: '售后中', value: 9},
  {label: '售后已结束', value: 10}
]);
/**
 * 拉取支付方式
 */
const getPaymentAgencyList = async () => {
  const _paymentAgencyList = await CfPayUtil.getPaymentAgencyListByQuery({
    page: 1,
    size: 200
  })
  if (_paymentAgencyList.code == 10002) {
    paymentAgencyList.value = _paymentAgencyList.data;
  } else {
    paymentAgencyList.value = [];
  }
}

/**
 * 拉取账单
 */
const getOrderList = async (_page: number, _size: number) => {
  const _orderList = await CfPayUtil.getOrderListByQuery({
    page: _page,
    size: _size,
    shopId: carParkId.value,
    orderByDesc: 'pay_time',
    minPayTime: 1,
    minAmountActuallyPaid: 0.01
  })
  if (_orderList.code == 10002) {
    for (const i of _orderList.data) {
      i.newPayTime = parseTime(i.payTime, null) || '-';
      for (const j of paymentAgencyList.value) {
        if (i.paymentAgencyShortName == j.paymentAgencyName) {
          i.paymentAgencyShortNameTitle = j.name;
          break;
        }
      }
      for (const k of goodsTypeOptions.value) {
        if (i.goodsType == k.value) {
          i.goodsTypeName = k.label;
          break;
        }
      }
      for (const m of statusOptions.value) {
        if (i.status == m.value) {
          i.statusName = m.label;
          break;
        }
      }
    }
    billList.data = _orderList.data;
  } else {
    billList.data = [];
  }
}

//获取财务报表
const getDailyIncomeStatisticsList = async (_shopId: number, _year: number, _month: number, _date: number, _goodsType: number, _statisticalModel: string, _orderByDesc: string, _paymentAgencyShortName: string, _minStartTime: number, _maxEndTime: number) => {
  let params = {
    page: 1,
    size: 20,
    shopId: _shopId,
    year: _year,
    month: _month,
    date: _date,
    orderByDesc: _orderByDesc,
    goodsType: _goodsType,
    statisticalModel: _statisticalModel,
    paymentAgencyShortName: _paymentAgencyShortName,
    minStartTime: _minStartTime,
    maxEndTime: _maxEndTime,
  }
  if(_shopId===null){
    delete params.shopId;
  }
  if(_goodsType===null){
    delete params.goodsType;
  }
  if(_paymentAgencyShortName===null){
    delete params.paymentAgencyShortName;
  }
  if(_year===null){
    delete params.year;
  }
  if(_month===null){
    delete params.month;
  }
  if(_date===null){
    delete params.date;
  }
  if(_minStartTime===null){
    delete params.minStartTime;
  }
  if(_maxEndTime===null){
    delete params.maxEndTime;
  }
  const _dailyIncomeStatisticsList = await CfPayUtil.getDailyIncomeStatisticsListByQuery(params);
  if(_dailyIncomeStatisticsList.code == 10002){
    for (const i of _dailyIncomeStatisticsList.data) {
      if(i.goodsType === 0){
        dailyIncomeStatistics.value = i;
      }else if(i.goodsType === 1){
        dailyIncomeStatisticsParking.value = i;
      }else if(i.goodsType === 5){
        dailyIncomeStatisticsPackage.value = i;
      }else if(i.goodsType === 14){
        dailyIncomeStatisticsStoreCard.value = i;
      }
    }
  }
};

// 退款操作
const refundAmt =ref();
const refundReason =ref();
const currentRefundOrder: Ref<CfOrder> =ref();
const isPopupRefund = ref(false);
const openPopupRefund = (_order : any) => {
  currentRefundOrder.value = _order;
	isPopupRefund.value = true;
};

const closePopupRefund = () => {
	isPopupRefund.value = false;
};
const confirmRefund = async () => {
  if(refundAmt.value==undefined || refundAmt.value<=0 || refundReason.value == undefined || refundReason.value == ''){
    return;
  }
  const _refundResult = await CfPayUtil.refund({
    orderId: currentRefundOrder.value.id,
    refundAmount: refundAmt.value,
    refundReason: refundReason.value
  });
  if(_refundResult.code == 10002){
    closePopupRefund();
    getOrderList(1, 200);
  }
};


onLoad((params) => {
  getPaymentAgencyList();
  if (params != undefined) {
    carParkId.value = params.id;
    getOrderList(1, 200);
    getDailyIncomeStatisticsList(carParkId.value, dayjs().year().valueOf(), 0, 0, null, null, 'counts_time', '', null, null);
  }
});

</script>

<style lang="scss" scoped> 
.sum { 
    border-radius: 15rpx;
    margin-top: 190rpx; 
    padding: 50rpx 0 30rpx 20rpx;
    text-align: center;
}
.tn-tabbar-height {
    min-height: 80rpx;
    height: calc(80rpx + env(safe-area-inset-bottom) / 2);
    height: calc(80rpx + constant(safe-area-inset-bottom));
}
.status {
    font-size: 14px;
    font-weight: 500;
    color: #10b981;
    background-color: #d1fae5;
    padding: 4px 8px;
    border-radius: 12px;
}
</style>
